<script setup lang="ts">
import { useTagsViewStore } from "@/store/modules/tagsView";
import { ElScrollbar, ElLink } from "element-plus";
import { computed, onMounted, unref, watch } from "vue";
import { useRouter } from "vue-router";
import { MyIcon } from "@/components/MyIcon";

const { currentRoute, push } = useRouter();
const tagsViewStore = useTagsViewStore();
const visitedViews = computed(() => tagsViewStore.visitedViews);
// console.log(currentRoute);

// 新增tags
const addTags = () => {
  // console.log(currentRoute)
  tagsViewStore.addView(unref(currentRoute));
};

// 移除tags
const removeTags = (view: any) => {
  if (unref(visitedViews).length === 1) {
    return;
  }
  if (view.fullPath === unref(currentRoute).fullPath) {
    unref(visitedViews).find((item, index, array) => {
      const isTags = item.name === view.name;
      if (isTags) {
        if (array.length === index + 1) {
          const fullPath = array[index - 1].fullPath;
          push(fullPath);
        } else {
          const fullPath = array[index + 1].fullPath;
          push(fullPath);
        }
      }
      return isTags;
    });
  }
  tagsViewStore.removeView(view);
};

// 选择标签页
const selectTags = (view: any) => {
  if (view.fullPath === unref(currentRoute).fullPath) {
    return;
  }
  push(view.fullPath);
};

onMounted(() => {
  addTags();
});

watch(
  () => currentRoute.value,
  () => {
    addTags();
  }
);
</script>

<template>
  <ElScrollbar aria-orientation="horizontal">
    <div class="tagsView">
      <div
        v-for="item in visitedViews"
        :key="item.name"
        class="tagsView-item"
        :class="
          unref(currentRoute).fullPath === item.fullPath ? 'tags-active' : ''
        "
      >
        <ElLink
          class="tags-ElLink"
          type="default"
          :underline="false"
          @click="selectTags(item)"
          >{{ item.title }}</ElLink
        >
        <MyIcon
          size="12px"
          class="icon-Close"
          @click="removeTags(item)"
          icon="el:Close"
        />
      </div>
    </div>
  </ElScrollbar>
</template>

<style lang="less" scoped>
.tags-active {
  background-color: var(--tagViewItem-bg-active-color);
  .tags-ElLink {
    color: var(--tagViewItem-test-active-color);
  }
}

.tagsView {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  height: var(--tags-view-height);
  border: 1px solid var(--tagView-border-color);
  box-sizing: border-box;
}

.tagsView-item {
  height: 30px;
  border: 1px solid var(--tagViewItem-border-color);
  border-radius: 3px;
  padding: 0 0px 0 15px;
  line-height: 30px;
  margin: 0 3px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  font-size: 12px;
  // color: #6a5f5f;
  .icon-Close {
    padding: 0 5px;
    visibility: hidden;
  }
}
.tagsView-item:hover {
  .icon-Close {
    visibility: visible;
  }
}
</style>
